<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<comDetailNavigateBack title="通知详情"/>
			
			<view class="detail-content relative font-hanserif-bold" :style="{'height':`calc(100vh - ${commonNavHeight} )`}">
				<view class="detail-title">{{detailInfo.title}}</view>
				<view class="detail-time">{{detailInfo.create_time}}</view>
				<view class="detail-main" v-html="detailInfo.content"></view>
				<view class="detail-footer flex-align-items-center flex-end">
					<image class="detail-official" src="/static/images/public_imgs/mp-logo.png" mode="heightFix"></image>
				</view>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	
	import { getEmailInfoApi } from '@/setupproject/INTERFACE';
	
	export default {
		name: 'notifyDetailPage',
		data() {
			return {
				detailInfo: {},
				detailId: '',
			};
		},
		onLoad({id}) {
			this.detailId = id;
			this.getNotifyFun();
		},
		watch: {
			
		},
		computed: {
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
		},
		methods: {
			async getNotifyFun() {
				const { data, code, msg } = await getEmailInfoApi({id: this.detailId});
				if (code !== 200) {
					return uni.showToast({ title: msg, icon: 'none' });
				}
				this.detailInfo = data;
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.detail-content {
		font-size: 30rpx;
		color: #fff;
		overflow-y: auto;
		padding: 45rpx 46rpx 90rpx;
		text-align: justify;
		.detail-title {
			font-size: 32rpx;
			color: #63FFF7;
			margin-bottom: 22rpx;
			line-height: 52rpx;
		}
		.detail-time {
			color: #FFFFFF;
			border-bottom: 1rpx solid #DBE0E9;
			padding-bottom: 22rpx;
			margin-bottom: 32rpx;
			font-size: 24rpx;
		}
		.detail-main {
			color: #FFFFFF;
			line-height: 42rpx;
			font-size: 24rpx;
		}
		.detail-footer {
			margin-top: 80rpx;
			.detail-official {
				width: 197rpx;
				height: 39rpx;
			}
		}
	}
</style>